<!-- <template>
    <div class="app-container">
        <el-form :model="filter">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-form-item label="所属市" label-width="60px">
                        <el-select v-model="filter.city" placeholder="请选择" clearable>
                            <el-option v-for="city in cities" :label="city" :value="city">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="用户角色" label-width="80px">
                        <el-select v-model="filter.role" placeholder="请选择" clearable>
                            <el-option v-for="role in roles" :label="role.roleName" :value="role.roleId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="搜索" label-width="55px">
                        <el-input v-model="filter.search" placeholder="请输入内容" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2" :offset="6" align="right">
                    <el-button type="primary" @click="display" icon="el-icon-search" size="medium">查询</el-button>
                </el-col>
                <el-col :span="2" align="right">
                    <el-button type="info" @click="resetFilter" icon="el-icon-refresh-left" size="medium">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row>
            <el-col :span="24" align="right">
                <el-button type="text" @click="enterCreateUser" style="font-size: 17px;">新建用户</el-button>
            </el-col>
        </el-row>

        <el-table v-loading="listLoading" :roles="roles" :data="viewData" element-loading-text="Loading" border fit
            highlight-current-row :cell-style="{ padding: '5px 0' }" stripe>
            <el-table-column label="账号" align="center" :min-width="'8%'" :max-width="'8%'">
                <template slot-scope="scope">
                    {{ scope.row.userAccount }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="组织机构代码" :min-width="'10%'" :max-width="'10%'">
                <template slot-scope="scope">
                    {{ scope.row.companyInstCode == null ? "——" : scope.row.companyInstCode }}
                </template>
            </el-table-column>
            <el-table-column label="名称" align="center" :min-width="'18%'" :max-width="'18%'">
                <template slot-scope="scope">
                    {{ scope.row.userName == null ? "未备案企业" : scope.row.userName }}
                </template>
            </el-table-column>
            <el-table-column label="通过备案" align="center" :min-width="'7%'" :max-width="'7%'">
                <template slot-scope="scope">
                    {{ scope.row.companyRecordStatus == null ? "——" : (scope.row.companyRecordStatus ? '是' : '否') }}
                </template>
            </el-table-column>
            <el-table-column label="所属市" align="center" :min-width="'10%'" :max-width="'10%'">
                <template slot-scope="scope">
                    {{ scope.row.userCity == null ? "——" : scope.row.userCity }}
                </template>
            </el-table-column>
            <el-table-column label="用户状态" align="center" :min-width="'7%'" :max-width="'7%'">
                <template slot-scope="scope">
                    {{ scope.row.userStatus ? '正常' : '已注销' }}
                </template>
            </el-table-column>
            <el-table-column label="用户角色" align="center" :min-width="'10%'" :max-width="'10%'">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.userRole" @change="changeUserRole(scope.row)" placeholder="请选择"
                        size="medium">
                        <el-option v-for="role in roles" :label="role.roleName" :value="role.roleId"
                            :disabled="scope.row.userRole == role.roleId">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" :min-width="'13%'" :max-width="'13%'">
                <template slot-scope="scope">
                    <el-button @click="jump2UserInfo(scope.row)" type="text" v-if="userAuthority >> 3 & 1"
                        :disabled="!scope.row.companyRecordStatus || scope.row.userRole != 3">查看</el-button>
                    <el-button @click="resetUserPwd(scope.row)" type="text">重置密码</el-button>
                    <el-button @click="changeUserStatus(scope.row)" type="text"
                        :disabled="scope.row.userAccount == 1 || scope.row.userAccount == currentUserId">{{
                            scope.row.userStatus ? '注销' : '恢复'
                        }}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" :current-page="page.currentPage"
            :page-sizes="[10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalItems">
        </el-pagination>

        <el-dialog title="新建用户" :visible.sync="newUser.creating" width="35%">
            <el-form :model="newUser">
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="用户角色" label-width="80px">
                            <el-select v-model="newUser.roleId" placeholder="请选择" clearable>
                                <el-option v-for="role in roles" :label="role.roleName" :value="role.roleId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="14">
                        <el-form-item v-show="newUser.roleId == 2" label="所属市" label-width="80px">
                            <el-input placeholder="请输入内容" v-model="newUser.city" clearable width="50px">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="newUser.creating = false">取 消</el-button>
                <el-button type="primary" @click="createNewUser">确 定</el-button>
            </span>
        </el-dialog>

        <div v-if="showCompanyRecord.showing">
            <recordDetailInfo :userId="showCompanyRecord.userId"
                @update-parameter="() => { showCompanyRecord.showing = false }" />
        </div>
    </div>
</template>

<script>
import { getAllUserInfo, getAllRoles, changeUserRole, resetUserPassword, changeUserStatus, createNewUser } from '@/api/province/userManage'
import recordDetailInfo from "@/views/examine/recordExamine/recordDetailInfo.vue"

export default {
    data() {
        return {
            currentUserId: 0,
            userAuthority: 0,
            list: [],
            showData: [],
            viewData: [],
            listLoading: true,
            roles: [],
            page: {
                currentPage: 1,
                pageSize: 10,
                totalItems: 0
            },
            cities: [],
            filter: {
                city: '',
                role: '',
                search: ''
            },
            newUser: {
                creating: false,
                role: '',
                city: ''
            },
            showCompanyRecord: {
                showing: false,
                userId: 0
            }
        };
    },
    components: {
        recordDetailInfo
    },
    created() {
        this.fetchData();
        this.currentUserId = this.$store.getters.userId;
        this.userAuthority = this.$store.getters.authority;
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            getAllUserInfo().then(response => {
                this.list = response.data.sort((a, b) => b.userStatus - a.userStatus);
                this.showData = this.list;
                this.cities = Array.from(new Set(this.list.filter(u => u.userCity != null).map(u => u.userCity)));
                this.display();
                this.listLoading = false; // 加载完列表就可以认为加载完成
            });
            getAllRoles().then(response => {
                // console.log(response.data)
                this.roles = response.data;
            });
        },

        changePageSize(val) {
            this.page.pageSize = val;
            this.display();
        },

        changeCurrentPage(val) {
            this.page.currentPage = val;
            this.display();
        },

        resetFilter() {
            this.filter = {
                city: '',
                role: '',
                search: ''
            };
        },

        filterUser() {
            this.showData = this.list.filter(item => {
                // console.log(item)
                if (this.filter.city && this.filter.city !== item.userCity)
                    return false;
                if (this.filter.role && this.filter.role !== item.userRole)
                    return false;
                if (this.filter.search)
                    return String(item.userAccount).indexOf(this.filter.search) != -1 ||
                        (item.conpanyInstCode != null && String(item.companyInstCode).indexOf(this.filter.search) != -1) ||
                        (item.userName != null && String(item.userName).indexOf(this.filter.search) != -1);
                return true;
            });
            this.page.totalItems = this.showData.length;
        },

        display() {
            // console.log(this.list)
            this.filterUser();
            this.viewData = this.showData.slice((this.page.currentPage - 1) * this.page.pageSize, Math.min(this.page.totalItems, this.page.currentPage * this.page.pageSize));
            // console.log(this.viewData)
        },

        changeUserRole(user) {
            this.$confirm('确定要修改用户角色吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                changeUserRole(user).then(response => {
                    if (response.success) {
                        this.$message({
                            type: 'success',
                            message: '已修改'
                        });
                        this.display();
                    }
                    this.fetchData();
                }).catch(this.fetchData());
            });
        },

        resetUserPwd(user) {
            this.$confirm('确定要重置该用户的密码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                resetUserPassword({ userId: user.userAccount }).then(response => {
                    if (response.success)
                        this.$message({
                            type: 'success',
                            message: '已重置'
                        });
                });
            });
        },

        changeUserStatus(user) {
            this.$confirm('确定要' + (user.userStatus ? '注销' : '恢复') + '该账户吗？' +
                '\n（未填报调查期数据的账号将被永久删除，其余账号将进行冻结）', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                changeUserStatus({ userAccount: user.userAccount, userStatus: !user.userStatus }).then(response => {
                    if (response.success) {
                        this.$message({
                            type: 'success',
                            message: user.userStatus ? '已注销该账户' : '恢复成功'
                        });
                        user.userStatus = !user.userStatus;
                        this.fetchData();
                    }
                    else
                        this.$message({
                            type: 'info',
                            message: (user.userStatus ? '注销' : '恢复') + '失败'
                        });
                });
            });
        },

        jump2UserInfo(user) {
            this.showCompanyRecord.userId = user.userAccount;
            this.showCompanyRecord.showing = true;
            // getSingleRecord({ userId: user.userAccount }).then(response => {
            //     console.log(response);
            // });
        },

        enterCreateUser() {
            this.newUser.creating = true;
            this.newUser.role = '';
            this.newUser.city = '';
        },

        createNewUser() {
            let valid = true;
            if (this.newUser.roleId == null) {
                this.$message({
                    type: 'info',
                    message: '请选择创建用户的角色权限'
                });
                valid = false;
            }
            else if (this.newUser.roleId == 2) {
                if (this.newUser.city === '') {
                    this.$message({
                        type: 'info',
                        message: '需输入市级用户所在城市'
                    });
                    valid = false;
                }
                else if (!this.newUser.city.endsWith('市'))
                    this.newUser.city += '市';
            }
            if (valid)
                createNewUser({ userRole: this.newUser.roleId, userCity: this.newUser.city }).then(response => {
                    if (response.success) {
                        this.$message({
                            type: 'success',
                            message: '创建成功'
                        });
                        this.fetchData();
                        this.newUser.creating = false;
                    }
                    else
                        this.$message({
                            type: 'info',
                            message: '创建失败'
                        });
                });
        }
    }
}

</script> -->